<template>
        <div class="dialog">
            <div class="title">业务系统基本信息</div>
            <div class="wrap1">
                <div><div>系统名称:</div><span style="color: #38b3aa;">成都市红十字会协同办公系统</span></div>
                <div><div>业务部门:</div>市红十字会</div>
                <div><div>上线时间:</div>2019-08-27</div>
                <div><div>业主方联系人:</div>唐五一</div>
                <div><div>联系电话:</div>13881782177</div>
                <div><div>邮箱:</div>714788699@qq.com</div>
                <div style="width: 100%;"><div>承建单位:</div>成都联创天诚信息科技有限公司!</div>
                <div><div>承建方联系人:</div>王祥林</div>
                <div><div>联系电话:</div>15108483545</div>
                <div><div>邮籍:</div>452832629@qq.com</div>
                <div style="width: 100%;"><div style="width: auto;">系统建设（运维）资金来源:</div>市级</div>
                <div style="width: 100%;"><div  style="width: auto;">自行落实部门上云经费:</div>是</div>
                <div style="width: 100%;"><div>项目简介:</div>系统与2010年建设，采用asp.net+SQLServer开发， 主要用于展示成都市红十字会动态信息，捐款信息公示，志愿書信息，网上祭奠等信息。</div>
                <div style="width: 100%;"><div>申请理由:</div>系统与2010年建设，采用asp.net+SQLServer开发， 主要用于展示成都市红十字会动态信息，捐款信息公示，志愿書信息，网上祭奠等信息。</div>
            </div>
            <div class="title">申请资源</div>
            <el-dialog :title="addShow==1?'新增':'修改'" :visible.sync="addShow" width="70%" append-to-body>
                  <div  style="max-height: 60vh;overflow-y: scroll;">
                    <AddBdialog/>
                  </div>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary">确 定</el-button>
                    <el-button @click="addShow=false">取 消</el-button>
                  </div>
            </el-dialog>
            <el-button type="primary" style="padding: 10px 40px;;" @click="addShow=1">新增</el-button>
            <el-table  :data="demoList"  style="width: 100%;margin-top: 20px;">
                     <el-table-column label="服务商"  prop="a"/>
                     <el-table-column label="资源类型"  prop="j"/>
                     <el-table-column label="数量"  prop="i"/>
                     <el-table-column label="资源详情">
                       <template slot-scope="scope">
                         <el-popover
                           placement="top-start"
                           width="300"
                           trigger="hover">
                               <div style="margin-bottom: 6px;"><label>可用域：</label>成都</div>
                               <div style="margin-bottom: 6px;"><label>规格分类：</label>通用服务器</div>
                               <div style="margin-bottom: 6px;"><label>vCPU(核)：</label>{{scope.row.b}}</div>
                               <div style="margin-bottom: 6px;"><label>GPU(核)：</label>{{scope.row.c}}</div>
                               <div style="margin-bottom: 6px;"><label>内存(GB)：</label>{{scope.row.d}}</div>
                               <div style="margin-bottom: 6px;"><label>系统盘大小(GB)：</label>{{scope.row.e}}</div>
                               <div style="margin-bottom: 6px;"><label>系统盘类型：</label>{{scope.row.f}}</div>
                               <div style="margin-bottom: 6px;"><label>数据盘(共<span style="color: #E83112;">{{scope.row.h.length}}</span>块):</label></div>
                               <div style="margin:0 0 6px 16px;" v-for="item in scope.row.h">{{item}}</div>
                           <div style="color: #3a8dfd;" slot="reference">
                             详情
                           </div>
                         </el-popover>
                       </template>
                     </el-table-column>
                      <!-- <el-table-column label="网络和安全协议">
                       <template slot-scope="scope">
                         <el-popover
                           placement="top-start"
                           width="300"
                           trigger="hover">
                              <div style="margin-bottom: 6px;"><label>电子政务网：</label></div>
                                 <div style="margin:0 0 6px 16px;">数量：1，带宽：100MB</div>
                              <div style="margin-bottom: 6px;"><label>互联网：</label></div>
                                 <div v-for="item in [1,11]" style="margin:0 0 6px 16px;">运营商：xx，数量：1，带宽：100MB</div>
                               <div style="margin-bottom: 6px;"><label>网卡配置：</label></div>
                                 <div v-for="item in [1,11]" style="margin:0 0 6px 16px;">IP地址：xx，MAC地址：xx</div>
                               <div style="margin-bottom: 6px;"><label>端口配置：</label></div>
                                 <div v-for="item in [1,11]" style="margin:0 0 6px 16px;">协议类型：xx，端口：xx</div>
                           <div style="color: #3a8dfd;" slot="reference">
                             详情
                           </div>
                         </el-popover>
                       </template>
                     </el-table-column> -->
                     <el-table-column label="操作"  class-name="small-padding fixed-width">
                       <template slot-scope="scope">
                         <el-button
                           v-show="!scope.row.instanceId"
                           size="mini"
                           type="text"
                           icon="el-icon-delete"
                           @click="addShow=2"
                         >修改</el-button>
                         <el-button
                           v-show="!scope.row.instanceId"
                           size="mini"
                           type="text"
                           icon="el-icon-delete"
                           @click="demoList.splice(scope.$index,1)"
                         >删除</el-button>
                       </template>
                     </el-table-column>
            </el-table>
              <div class="wrap1" style="margin-top: 10px;">
                   <div style="width: 100%;line-height: 28px;"><div>云资源合计:</div>
                       虚拟机10台<br/>vCPU10核<br/>内存10GB<br/>存储1010TB（其中：分布式存储1010_TB、FC存储、1010TB、视频云存储、1010TB、高性能存储1010TB）
                       物理机10台<br/>CPU10核<br/>内存10GB<br/>存储1010TB（其中：分布式存储1010TB、FC存储、1010TB、高性能存储1010TB）
                   </div>
                   <div style="width: 100%;"><div>预估费用:</div><span style="color: #E83112">¥10000.00</span></div>
              </div>
          <div class="title" style="margin-top: 30px;">安全产品</div>
            <div class="wrap1">
                <div style="width: 100%;">虚拟防火墙、虚拟DS</div>
            </div>
          <!--  <div class="title">服务清单</div>
            <div class="wrap1">
              <div style="width: 100%;"><span style="font-weight: bold;margin-right: 10px;">服务商:</span>曙光云</div>
            </div> -->
           <!-- <div class="title" style="margin-top: 20px;">申请说明</div>
            <div class="wrap1">
              <div style="width: 100%;">曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云曙光云</div>
            </div> -->
            <div class="title" style="margin-top: 30px;">运维服务</div>
            <div class="wrap2">
                <div style="display: flex;">
                 <div><span style="font-weight: bold;margin-right: 10px;">部署截止时间:</span>2020</div>
                 <div><span style="font-weight: bold;margin:0 10px 0 100px;">运维等级:</span>一级</div>
                </div>
                <div style="display: flex;"><span style="font-weight: bold;margin-right: 10px;">运维等级分类:</span>A类:重点和关键应用，7*24运行; <br/>B类:重要应用，重点保障5x8小时工作时间正常运行;<br/> C类: 一般应用，重点保障用户使用时的正常运行。</div>
                <div style="display: flex;"><span style="font-weight: bold;margin-right: 10px;">等保说明:</span>重点和关键应用重点和关键应用重点和关键应用重点和关键应用</div>
               <!-- <div style="font-weight: bold;">文件:</div>
                <el-table v-loading="loading" :data="demoList"  style="width: 100%">
                   <el-table-column label="文件名"  prop="instanceId"/>
                   <el-table-column label="类型"  prop="instanceId"/>
                   <el-table-column label="大小"  prop="instanceId"/>
                   <el-table-column label="进度"  prop="instanceId"/>
                   <el-table-column label="路径"  prop="instanceId"/>
                </el-table> -->
            </div>
            <div class="title" style="margin-top: 30px;">其他</div>
            <div class="wrap2" style="padding-top: 1px;">
                <div style="display: flex;"><span style="font-weight: bold;margin-right: 10px;">说明:</span>重点和关键应用重点和关键应用重点和关键应用重点和关键应用</div>
               <div style="font-weight: bold;">文件:</div>
                <el-table :data="files"  style="width: 100%">
                   <el-table-column label="文件名"  prop="instanceId"/>
                   <el-table-column label="类型"  prop="instanceId"/>
                   <el-table-column label="大小"  prop="instanceId"/>
                   <el-table-column label="进度"  prop="instanceId"/>
                   <el-table-column label="路径"  prop="instanceId"/>
                </el-table>
            </div>



            <!-- <div class="title">资源可用配额</div>
            <div class="wrap3" style="overflow-x: hidden;">
               <div style="display: flex;margin-bottom: 20px;text-align: center;min-width: 800px;">
                <div style="width: 15%;">虚拟机</div>
                <div style="width: 50%;">云存储</div>
                <div style="width: 35%;">高性能服务器</div>
               </div>
                  <el-table v-loading="loading" :data="demoList"  style="width: 100%">
                     <el-table-column label="vCPU(核)"  prop="instanceId"/>
                     <el-table-column label="虚拟内存(GB)"  prop="instanceId"/>
                     <el-table-column label="FCSSD存储(GB)"  prop="instanceId"/>
                     <el-table-column label="FC普通块存储(GB)"  prop="instanceId"/>
                     <el-table-column label="分布式块存储(GB)"  prop="instanceId"/>
                     <el-table-column label="文件存储(GB)"  prop="instanceId"/>
                     <el-table-column label="视频存储(GB)"  prop="instanceId"/>
                     <el-table-column label="物理机A(台)"  prop="instanceId"/>
                     <el-table-column label="物理机B(台)"  prop="instanceId"/>
                     <el-table-column label="物理机C(台)"  prop="instanceId"/>
                  </el-table>
            </div> -->
        </div>
</template>

<script>

import AddBdialog  from "./addBdialog.vue";
export default {
  name: "detail",
  components: {
    AddBdialog
  },
  props: {

  },
  data() {
    return {
      loading:false,
      addShow:false,
      demoList:[{
        a:'浪潮云',j:'云服务器',b:4,c:8,d:8,e:128,f:'分布式存储',g:`windows/win10`,h:['分布式存储，4GB，数量：2','分布式存储，8GB，数量：3'],i:1
      }
      ],
      files:[]
    };
  },
  created() {
  },
  methods: {


  }
};
</script>

<style scoped lang="less">
  .dialog{
    padding-right: 20px;
    .title{
      text-align: left;
     margin-bottom: 20px;
     font-size: 16px;
     font-weight: bold;
     padding-left: 4px;
     border-left: 4px solid #38b3aa;
    }
    .wrap1{
      padding:0  20px 20px 0px;
      background: #faf9ff;
      display: flex;
      flex-wrap: wrap;
       margin-bottom: 30px;
      // justify-content: space-between;
      border-radius: 10px;
      div{
        margin-top: 20px;
        margin-left: 20px;
        width: calc(33.33% - 20px);
        min-width: 340px;
        display: flex;
        div{
          width: 100px;
          min-width:100px;
          font-weight: bold;
          margin: 0;
          display: flex;
          padding-right: 10px;
          justify-content: flex-end;
        }
      }
    }
    .wrap2{
      padding:0  20px 20px 20px;
      background: #faf9ff;
       margin-bottom: 30px;
      justify-content: space-between;
      border-radius: 10px;
      div{
        margin-top: 20px;
      }
    }
    .wrap3{
      padding:20px;
      background: #faf9ff;
      margin-bottom: 30px;
      justify-content: space-between;
      border-radius: 10px;
    }
  }
</style>
